<template>
  <div class="container">
    <van-nav-bar title="我的团队" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="bg-primary bg"></div>
    <van-tabs v-model="active" @click="activeChange">
      <van-tab title="已审核" name="a">
        <van-list v-model="loading" finished-text="没有更多了" :finished="finished" @load="getProcessed">
          <div class="list" v-for="(item,index) in list" :key="index">
            <div class="item">
              <p>
                姓名：{{item.name}}
                <br />
                电话：{{item.phone}}
              </p>
            </div>
            <div>到期时间：{{item.expire_time}}</div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="待审核" name="b">
        <van-list v-model="loading" finished-text="没有更多了" :finished="finished" @load="getProcessed">
          <div class="list" v-for="(item,index) in list" :key="index">
            <div class="item">
              <p>
                姓名：{{item.name}}
                <br />
                电话：{{item.phone}}
              </p>
            </div>
            <div>创建时间：{{item.created_at}}</div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="未出租" name="c">
        <van-list v-model="loading" finished-text="没有更多了" :finished="finished" @load="getProcessed">
          <div class="list" v-for="(item,index) in list" :key="index">
            <div class="item">
              <p>店铺编号：{{item.tenant_serial}}</p>
            </div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="已出租" name="d">
        <van-list v-model="loading" finished-text="没有更多了" :finished="finished" @load="getProcessed">
          <div class="list" v-for="(item,index) in list" :key="index">
            <div class="item">
              <p>店铺编号：{{item.tenant_serial}}</p>
            </div>
          </div>
        </van-list>
      </van-tab>
      <!-- <van-tab title="全部店铺" name="e">
          <van-list v-model="loading" finished-text="没有更多了" :finished="finished" @load="getProcessed">
          <div class="list" v-for="(item,index) in list" :key="index">
            <div class="item">
              <p>
                店铺编号：{{item.tenant_serial}}  
              </p>
            </div>
          </div>
        </van-list>
      </van-tab>-->
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: "Process",
  data() {
    return {
      page: 0,
      active: "",
      key: "processed",
      list: [],
      loading: false,
      finished: false,
      last_page: 99
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    getProcessed() {
      if (this.page >= this.last_page) {
        console.log(`数据已加载完毕`);
        this.finished = true;
        this.loading = false;
        return false;
      }
      this.page++;
      let data = {
        key: this.key,
        page: this.page
      };
      if (this.key == "") {
        data = {};
      }
      this.$ajax.get({ url: "App/ownerst/storelist", data }).then(res => {
        console.log("请求与发出", res);
        this.list = this.list.concat(res.data.data);
        this.last_page = res.data.last_page;
        this.total = res.data.total;
        this.loading = false;
        // this.finished = true;
      });
    },
    activeChange(name) {
      // 每次tab切换把所有数据恢复默认
      this.page = 0;
      this.last_page = 99;
      this.list = [];
      this.finished = false;
      this.loading = false;
      this.total = 0;
      switch (name) {
        case "a":
          this.key = "processed";
          this.getProcessed();
          break;
        case "b":
          this.key = "pending";
          this.getProcessed();
          break;
        case "c":
          this.key = "unlease";
          break;
        case "d":
          this.key = "";
          break;
      }
    }
  },
  mounted() {
    this.active = this.$route.query.active;
    switch (this.active) {
      case "a":
        this.key = "processed";
        break;
      case "b":
        this.key = "pending";
        break;
      case "c":
        this.key = "unlease";
        break;
      case "d":
        this.key = "";
        break;
    }
  }
};
</script>

<style  lang="scss" scoped>
.bg {
  height: 60px;
}
.list {
  /* position: relative; */
  display: flex;
  flex-direction: column;
  // margin-bottom: 10px;
  box-shadow: 0px 1px 2px #cccccc;
  padding: 5px 0px;
  width: 94%;
  border-radius: 10px;
  margin: 10px auto;
}
</style>